<template>
  <div class="helper">
    <div class="face" :class="state" :id="state === 'idle' ? 'blinking' : ''"></div>
    <p>{{ message }}</p>
    <button @click="handleButtonClick">点击我</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const state = ref('idle');
const message = ref('你好，我是你的助手。');
const clickCount = ref(0);

const messages = {
  idle: "你好，我是你的助手。",
  error: "哎呀，出错了。让我看看是什么问题。",
  reminder: "你已经工作很久了，记得休息一下哦。",
  confused: "你点击了很多次，需要帮助吗？",
  success: "操作成功！",
  warning: "请注意，这可能不是你想要的操作。"
};

function updateMessage(newState) {
  state.value = newState;
  message.value = messages[newState];
}

function handleError(error) {
  updateMessage('error');
  console.error(`错误信息: ${error.message}`);
}

function handleIdle() {
  updateMessage('idle');
}

function handleReminder() {
  updateMessage('reminder');
}

function handleClickTooMuch() {
  updateMessage('confused');
  clickCount.value = 0; // 重置计数
}

function handleSuccess() {
  updateMessage('success');
}

function handleWarning() {
  updateMessage('warning');
}

function handleButtonClick() {
  clickCount.value++;
  if (clickCount.value > 5) {
    handleClickTooMuch();
  } else {
    handleIdle();
  }
}

let reminderInterval = null;

function startReminder(interval) {
  stopReminder();
  reminderInterval = setInterval(() => {
    handleReminder();
  }, interval * 60 * 1000); // 每隔interval分钟提醒一次
}

function stopReminder() {
  if (reminderInterval) {
    clearInterval(reminderInterval);
    reminderInterval = null;
  }
}

onMounted(() => {
  startReminder(15); // 每15分钟提醒一次
  handleIdle(); // 初始状态
});
</script>

<style scoped>
.helper {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.face {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffcc00;
  margin: 0 auto 20px;
  position: relative;
  overflow: hidden;
}

.face::before,
.face::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
}

.face::before {
  left: 25px;
}

.face::after {
  right: 25px;
}

.face.error::before,
.face.error::after {
  top: 50px;
}

.face.confused::before,
.face.confused::after {
  top: 50px;
  transform: translateY(10px);
}

.face.success::before,
.face.success::after {
  top: 50px;
  transform: translateY(10px);
}

.face.warning::before,
.face.warning::after {
  top: 50px;
  transform: translateY(10px);
}

.face::before,
.face::after {
  transition: all 0.3s ease;
}

@keyframes blink {
  0% {
    height: 10px;
  }

  50% {
    height: 0;
  }

  100% {
    height: 10px;
  }
}

#blinking::before,
#blinking::after {
  animation: blink 2s infinite;
}

#message {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

#clickButton {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#clickButton:hover {
  background-color: #0056b3;
}
</style>